<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手机号姓名验证</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <?php include 'includes/navbar.php'; ?>
    <div class="container mt-5">
        <div class="card">
            <h2 class="mb-4 text-center">手机号姓名验证</h2>
            <form id="verifyForm">
                <div class="mb-3">
                    <label for="mobile" class="form-label">手机号</label>
                    <input type="text" class="form-control" id="mobile" name="mobile" required>
                </div>
                <div class="mb-3">
                    <label for="name" class="form-label">姓名</label>
                    <input type="text" class="form-control" id="name" name="name" required>
                </div>
                <button type="submit" class="btn btn-primary w-100">验证</button>
            </form>
            <div id="result" class="mt-3"></div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/script.js"></script>
    <script>
        document.getElementById('verifyForm').addEventListener('submit', function(event) {
            event.preventDefault();
            var mobile = document.getElementById('mobile').value;
            var name = document.getElementById('name').value;
        
            fetch('mobile-verify.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ mobile: mobile, name: name })
            })
            .then(response => response.json())
            .then(data => {
                if (data.code === 0) {
                    var resultHtml = '<div class="alert alert-success" role="alert">';
                    resultHtml += '验证结果: ' + data.desc + '<br>';
                    resultHtml += '省份: ' + data.data.province + '<br>';
                    resultHtml += '城市: ' + data.data.city + '<br>';
                    resultHtml += '区号: ' + data.data.areacode + '<br>';
                    resultHtml += '邮编: ' + data.data.postcode + '<br>';
                    resultHtml += '运营商: ' + data.data.isp + '<br>';
                    resultHtml += '</div>';
                    document.getElementById('result').innerHTML = resultHtml;
                } else {
                    document.getElementById('result').innerHTML = '<div class="alert alert-danger" role="alert">' + data.desc + '</div>';
                }
            })
            .catch(error => {
                document.getElementById('result').innerHTML = '<div class="alert alert-danger" role="alert">验证失败: ' + error + '</div>';
            });
        });
    </script>
</body>
</html>